<template>
  <div class="root">
    <div class="icon">
      <img src="../../../assets/images/首页logo.png">
      <span>云医通</span>
    </div>
    <el-form :model="UserStore" :rules="rules_register" ref="form_register" style="margin-left: 400px;" class="regisiter">
      <!-- 账号 -->
      <div class="user">
        <p class="user-account">账号:</p>
        <el-form-item class="input custom-error-item" prop="account">
          <el-input style="width: 300px;font-size: 18px;margin-left: 40px;margin-top: 5px;" size="small"
            v-model="UserStore.account" placeholder="请输入用户名"></el-input>
        </el-form-item>
      </div>
      <!-- 组件单选框不生效 -->
      <div style="display: flex;margin-bottom: -20px;">
        <span style="font-size: 18px;margin-right: 20px;">性别:</span>

        <el-form-item prop="sex" style="margin-left: 300px;"class="custom-error-item-sex">
          <div style="position: relative;">

            <input type="radio" value='男' v-model="UserStore.sex"
              style="height: 20px;width: 20px;margin-left: -280px;"></input>
            <span style="font-size: 18px;position: absolute;margin-top: -5px;">男</span>

            <input type="radio" value='女' v-model="UserStore.sex"
              style="height: 20px;width: 20px;margin-right: 5px;margin-left: 40px;"></input>
            <span style="font-size: 18px;position: absolute;margin-top: -5px;">女</span>

          </div>
        </el-form-item>
      </div>
      <!-- 年龄 -->
      <div class="user">
        <p class="user-account">年龄:</p>
        <el-form-item class="input custom-error-item-age" prop="age">
          <el-input style="width: 300px;font-size: 18px;margin-left: 40px;margin-top: 5px;" size="small"
            v-model="UserStore.age" placeholder="请输入年龄"></el-input>
        </el-form-item>
      </div>
      <!-- 身份证 -->
      <div class="user">
        <p style="font-size: 18px;margin-top: 10px;margin-right: 3px;">身份证号:</p>
        <el-form-item class="input" prop="idCard">
          <el-input style="width: 300px;font-size: 18px;margin-left: 5px;margin-top: 5px;" size="small"
            v-model="UserStore.idCard" placeholder="请输入身份证号"></el-input>
        </el-form-item>
      </div>
      <!-- 手机 -->
      <div class="user">
        <p class="user-account" style="font-size: 18px;margin-top: 10px;margin-right: 18px;">手机号:</p>
        <el-form-item class="input" prop="phone">
          <el-input style="width: 300px;font-size: 18px;margin-left: 5px;margin-top: 5px;" size="small"
            v-model="UserStore.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
      </div>
      <!-- 密码 -->
      <div class="user">
        <p class="user-account">密码:</p>
        <el-form-item class="input custom-error-item" prop="password">
          <el-input style="width: 300px;font-size: 18px;margin-left: 40px;margin-top: 5px;" size="small"
            v-model="UserStore.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
      </div>
      <!-- 确认密码 -->
      <div class="user">
        <p style="font-size: 18px;margin-top: 10px;margin-right: 5px;">确认密码:</p>
        <el-form-item class="input" prop="confirmPassword">
          <el-input style="width: 300px;font-size: 18px;" size="small" v-model="UserStore.confirmPassword"
            type="password" placeholder="请重新输入密码"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <div class="footer">
      <el-button type="primary" @click="subRegister()" style="width: 300px;">
        注册
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { reqRegUser } from '@/api/user'
import NProgress from "nprogress";
import "nprogress/nprogress.css"

// 取消进度条加载圆圈
NProgress.configure({ showSpinner: false });

const $router = useRouter()

//注册表单实例
let form_register = ref()

onMounted(async () => {
  form_register.value.resetFields();
})

// 用户注册信息
let UserStore = reactive({
  account: '',
  age: null,
  idCard: '',
  phone: '',
  password: '',
  confirmPassword: '',
  sex: '',
  token: ''
})

//用户名校验 
const validateUsername = (rule, value, callback) => {
  const usernamePattern = /^[A-Za-z0-9\u4e00-\u9fa5]{1,10}$/; // 匹配字母、数字和汉字，长度在1到10之间
  if (!value) {
    callback(new Error('用户名不能为空'))
  } else if (!usernamePattern.test(value)) {
    callback(new Error('用户名只能包含字母、数字或汉字，且长度在1到10之间'));
  } else {
    callback();
  }
};
//用户密码校验
const validatePassword = (rule, value, callback) => {
  const passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,10}$/; // 只能包含字母或数字，长度在8到10之间
  if (!value) {
    callback(new Error('密码不能为空'))
  } else if (!passwordPattern.test(value)) {
    callback(new Error('密码必须包含字母和数字，且长度在8到10之间'));
  } else {
    callback();
  }
};

// 注册校验规则
const rules_register = {
  sex: [{ trigger: 'blue' }, {
    validator: (rule, value, callback) => {
      if (!value) {
        callback(new Error('性别不能为空'));
      } else {
        callback();
      }
    },
    trigger: 'blur',
  }],
  account: [{ trigger: 'blur' },
  { validator: validateUsername, trigger: 'blur' }],
  age: [
    { trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        const agePattern = /^[1-9][0-9]{0,2}$/; // 1-130的整数
        if (!value) {
          callback(new Error('年龄不能为空'));
        } else if (!agePattern.test(value) || value < 1 || value > 130) {
          callback(new Error('年龄必须为 1 到 130 的整数'));
        } else {
          callback();
        }
      },
      trigger: 'blur',
    },],
  idCard: [
    { trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        const idCardPattern = /^(^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))([0-2][1-9]|(3[01]))\d{3}(\d|X))$/; // 身份证号校验
        if (!value) {
          callback(new Error('身份证号不能为空'));
        } else if (!idCardPattern.test(value)) {
          callback(new Error('请输入有效的身份证号'));
        } else {
          callback();
        }
      },
      trigger: 'blur',
    },],
  phone: [
    { trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        const phonePattern = /^[1][3-9][0-9]{9}$/; // 手机号校验规则
        if (!value) {
          callback(new Error('手机号不能为空'))
          // callback(alert('手机号不能为空'));
        } else if (!phonePattern.test(value)) {
          callback(new Error('请输入有效的手机号'));
        } else {
          callback();
        }
      },
      trigger: 'blur',
    },],
  password: [{ trigger: 'blur' },
  { validator: validatePassword, trigger: 'blur' }],
  confirmPassword: [{ trigger: 'blur' },
  {
    validator: (rule, value, callback) => {
      if (value != UserStore.password) { // 确认密码与设定密码一致
        callback(new Error('确认密码与密码不一致'));
      } else {
        callback();
      }
    },
    trigger: 'blur',
  },],
}

// 点击注册
const subRegister = async () => {
  // 整体校验
  await form_register.value.validate()
  NProgress.start()
  // 发送注册请求
  let res = await reqRegUser(
    UserStore.account,
    UserStore.password,
    UserStore.sex,
    parseInt(UserStore.age),
    UserStore.idCard,
    UserStore.phone,
    UserStore.confirmPassword
  )
  NProgress.done()
  // console.log(res)
  if (res.data.code == 1) {
    // localStorage.setItem('TOKEN',res.data.data)
    // localStorage.setItem('NAME',UserStore.account)
    $router.push('/home')
    alert(`注册成功 请登录`)
  } else {
    alert(`${res.data.msg}`)
  }
}

</script>

<style lang="scss" scoped>
.root {
  min-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .icon {
    display: flex;
    margin-top: 5%;
    margin-bottom: 20px;
    margin-left: 160px;
    img {
      width: 80px;
      height: 80px;
      // margin-left: 40%;
    }

    span {
      font-size: 36px;
      margin-left: 30px;
      margin-top: 20px;
      width: 240px;
      font-style: italic;
      font-weight: 600;
      background: linear-gradient(45deg, #c2e9fb, #a1c4fd);
      -webkit-background-clip: text;
      color: transparent;
    }
  }

  .regisiter{
    margin-right: 20%;
    .user {
      display: flex;
      // margin-left: 320px;
      // margin-bottom: 30px;

      .user-account {
        font-size: 18px;
      }
    }
  }

  .footer {
    margin-left: 60px;
  }
  .custom-error-item-sex{
    position: relative;
    ::v-deep(.el-form-item__error){
      width: 200px;
      position: absolute;
      top:28px;
      left:-280px
    }
  }
  .custom-error-item{
    ::v-deep(.el-form-item__error){
      margin-left: 40px;
    }
  }
  .custom-error-item-age{
    position: relative;
    ::v-deep(.el-form-item__error){
      position: absolute;
      left:40px;
    }
  }
}
</style>
